<!DOCTYPE html>
<html>
  <head>
    <title>MMDK UI Mock</title>
    <%= stylesheet_link_tag "global" %> 
    <script type="text/javascript">
      s_events = <%= @s_events %>;
      s_events_len = s_events.length;
 
      c_feed = <%= @c_feed %>;
      c_feed_len = c_feed.length;
    </script>
    <%= javascript_include_tag  "jquery-1.4.2.min.js","global.js", :cache => true %>
  </head>
  
  <body>
    <header>
      <h1 id="room-name">Union 2424 Patroon</h1>
      <h1 id="time"></h1>
    </header>
    <div id="mv-schedule" class="split-panel">
      <form id="search">
        <input type="text" id="search-box" class="placeholder" value="Find an Event or Room" autocomplete="off" />
      </form>
      
      <ul id="schedule-opts">
        <li class="selected" id="schedule-d">Today</li>
        <li id="schedule-w">Weekly</li>
        <li id="schedule-m">Monthly</li>
      </ul>
      
      <ul id="timeline">
      </ul>
      
      <ul id="coverflow">
        
      </ul>
      
      <ul id="pagination">
        <li id="pagin-left">&laquo;</li>
        <li id="pagin-right">&raquo;</li>
      </ul>
      <ul id="keyboard">
        <li id="keyboard-123">
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>0</li>
          </ul>
        </li>
        <li id="keyboard-qwe">
          <ul>
            <li>Q</li>
            <li>W</li>
            <li>E</li>
            <li>R</li>
            <li>T</li>
            <li>Y</li>
            <li>U</li>
            <li>I</li>
            <li>O</li>
            <li>P</li>
          </ul>
        </li>
        <li id="keyboard-asd">
          <ul>
            <li>A</li>
            <li>S</li>
            <li>D</li>
            <li>F</li>
            <li>G</li>
            <li>H</li>
            <li>J</li>
            <li>K</li>
            <li>L</li>
          </ul>
        </li>
        <li id="keyboard-zxc">
          <ul>
            <li>Z</li>
            <li>X</li>
            <li>C</li>
            <li>V</li>
            <li>B</li>
            <li>N</li>
            <li>M</li>
          </ul>
        </li>
        <li id="keyboard-special">
          <ul>
            <li id="keyboard-go">Go</li>
            <li id="keyboard-space"></li>
            <li id="keyboard-backspace">&larr;X</li>
          </ul>
        </li>
      </ul>

    </div>
    
    <div id="mv-concerto" class="split-panel">
      <ul id="concerto-wrapper">
      </ul>
    </div>
  </body>
  
</html>
